<script>
export default {
  name: 'role'
}
</script>

<script setup>
import { ref, onMounted } from 'vue'
import Search from '@/views/system/role/cpns/search.vue'
import Content from '@/views/system/role/cpns/content.vue'
import RoleDialog from '@/views/system/role/cpns/role-dialog.vue'
import useRoleStore from '@/store/role/index.js'

// 分页参数
const page = ref(1)
const size = ref(10)
const roleStore = useRoleStore()
const dialogRef = ref()

// 初始化加载数据
onMounted(() => {
  fetchRoles()
})

// 统一数据获取方法
const fetchRoles = (params = {}) => {
  roleStore.getRoleListAction(page.value, size.value, params)
}

// 搜索和重置
const handleSearch = (searchParams) => {
  page.value = 1 // 重置页码到第一页
  fetchRoles(searchParams)
}

const handleReset = () => {
  page.value = 1
  fetchRoles()
}

// 对话框控制
const showCreateDialog = () => {
  if (dialogRef.value) {
    dialogRef.value.dialogVisible = true
    dialogRef.value.isNewOrUpdate = true
  }
}

const showEditDialog = (row) => {
  if (dialogRef.value) {
    dialogRef.value.dialogVisible = true
    dialogRef.value.isNewOrUpdate = false
    dialogRef.value.dialogEditInfoBtn(row)
  }
}
</script>

<template>
  <div class="role">
    <Search
      @search-params-btn-emits="handleSearch"
      @reset-params-btn-emits="handleReset"
    />

    <Content
      @dialog-visible-emits="showCreateDialog"
      @dialog-update-visible-emits="showEditDialog"
      :role-list="roleStore.roleList?.records || []"
    />

    <RoleDialog ref="dialogRef" />
  </div>
</template>

<style scoped lang="less">
.role {
  padding: 20px;
}
</style>